---
import BaseLayout from "@layouts/BaseLayout.astro";
const title = `Error 404`;
const description = `Error 404`;
---

<BaseLayout title={title} description={description}>
  <main id="content">
    <div class="px-4 py-10 text-center sm:px-6 lg:px-8">
      <h1 class="block text-7xl font-bold sm:text-9xl">404</h1>
      <p class="mt-3">Oops, something went wrong.</p>
      <p class="">Sorry, we couldn't find your page.</p>
      <div
        class="mt-5 flex flex-col items-center justify-center gap-2 sm:flex-row sm:gap-3"
      >
        <a
          class="inline-flex w-full items-center justify-center gap-x-2 rounded-lg border border-transparent px-4 py-3 text-sm font-semibold disabled:pointer-events-none disabled:opacity-50 sm:w-auto"
          href="/"
        >
          <i class="icon-base i-tabler-chevron-left"></i>
          Back to homepage
        </a>
      </div>
    </div>
  </main>
</BaseLayout>
